<template>
	<div class="toast" v-show = "isShow">
		<span>{{message}}</span>
	</div>
</template>

<script>
	export default{
		name: "Toast",
		// props: {
		// 	message: {
		// 		type: String,
		// 		default: "默认提示"
		// 	},
		// 	isShow: {
		// 		type: Boolean,
		// 		default: false
		// 	}
		// },
		data() {
			return {
				isShow: false,
				message: ''
			}
		},
		methods: {
			show(message='默认提示', duration=2000) {
				this.isShow = true
				this.message = message
				setTimeout(() => {
					this.isShow = false
					this.message = ''
				}, duration)
			}
		},
	}
</script>

<style scoped="scoped">
	.toast{
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 999;
	}
	
	.toast span{
		padding: 10px 20px;
		background: rgba(0,0,0,0.7);
		color: #fff;
	}
</style>
